<template>

  <div>

      <h2>测试题</h2>

      <div class="subject" v-for="(item,index) in arr" :key='index'>

          <span>{{item.num1}}</span>

          <span>+</span>

          <span>{{item.num2}}</span>

          <span>=</span>

          <input type="number" v-model='item.result' />

          <button @click.prevent='sum(index)' :disabled="item.submitted">提交</button>

      </div>

      <br>

      <div>

          <span v-for='(item,ind) in arr' :key='ind'
              :class="{right:item.status==='正确',error:item.status==='错误',undo:item.status==='未完成'}">{{ind+1}}:
              {{item.status}}</span>

      </div>

  </div>

</template>

<script>
  export default {
      data() {
          return {
              arr: [{
                  num1: Math.floor(Math.random() * 10),
                  num2: Math.floor(Math.random() * 10),
                  status: '未完成',
                  result: '',
                  submitted: false
              }, {
                  num1: Math.floor(Math.random() * 10),
                  num2: Math.floor(Math.random() * 10),
                  status: '未完成',
                  result: '',
                  submitted: false
              }, {
                  num1: Math.floor(Math.random() * 10),
                  num2: Math.floor(Math.random() * 10),
                  status: '未完成',
                  result: '',
                  submitted: false
              }, {
                  num1: Math.floor(Math.random() * 10),
                  num2: Math.floor(Math.random() * 10),
                  status: '未完成',
                  result: '',
                  submitted: false
              }, {
                  num1: Math.floor(Math.random() * 10),
                  num2: Math.floor(Math.random() * 10),
                  status: '未完成',
                  result: '',
                  submitted: false
              }],
          }
      },
      methods: {
          sum(index) {
              if (this.arr[index].result == '') {
                  return
              }
              if (this.arr[index].result == this.arr[index].num1 + this.arr[index].num2) {
                  this.arr[index].status = '正确'
                  this.arr[index].submitted = true
              } else {
                  this.arr[index].status = '错误'
              }
          }
      }
  }
</script>

<style>
  .subject {

      margin: 5px;

      padding: 5px;

      font-size: 20px;

  }

  .subject>span {

      display: inline-block;

      text-align: center;

      width: 20px;

  }

  .subject input {

      width: 50px;

      height: 20px;

  }

  .right {

      color: green;

  }

  .error {

      color: red;

  }

  .undo {

      color: #ccc;

  }

  body {

      background-color: #eee;

  }

  #app {

      background-color: #fff;

      width: 500px;

      margin: 50px auto;

      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);

      padding: 2em;

  }
</style>